<template>
  <div>
    <!-- <el-container> -->
    <!-- 如果登录账号为Admingly则显示内容 否则显示路径错误 -->
    <el-container v-if="this.$store.state.loginname=='Admingly'">
      <el-header style="padding:0" class="myheader">
        <el-menu class="el-menu-demo sfmenu" background-color="#303133">
          <div>心食谱后台管理系统</div>
          <div>
            <el-button type="text" @click="dialogVisible = true"><img :src="this.$store.state.loginname1" alt=""></el-button>
            <el-dialog
              :visible.sync="dialogVisible"
              width="30%"
              >
              <a @click="setis(indexshow=!indexshow);setfs(fabiaoshow=false);dialogVisible=false" class="htzya">添加用户</a>
              <a @click="setfs(fabiaoshow=!fabiaoshow);setis(indexshow=false);dialogVisible=false" class="htzya">添加食谱</a>
              <a class="htzya">添加分类</a>
              <router-link to="/" class="htzya">前台首页</router-link>
              <a @click="tczh()" class="htzya">退出登录</a>
              <!-- <span>这是一段信息</span> -->
            </el-dialog>
            <!-- <img src="/img/0000.jpg" alt=""> -->
          </div>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="150px" class="myaside">
          <el-menu :default-active="$route.path" class="menu" active-text-color="red" text-color="#fff" background-color="#303133" router>
            <el-menu-item index="/houtaizy/yh">
              <i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/houtaizy/sp">
              <i class="el-icon-s-order"></i>
              <span>食谱管理</span>
            </el-menu-item>
            <el-menu-item index="/houtaizy/fl">
              <i class="el-icon-guide"></i>
              <span>分类管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="mmain">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <div v-else>
      <my-header/>
      <not-found />
      <my-footer/>
    </div>
    <index/>
    <fa-biao/>
  </div>
</template>
<script>
import MyHeader from '@/components/MyHeader.vue'
import { mapMutations, mapState } from 'vuex'
import FaBiao from './FaBiao.vue'
import Index from './Index.vue'
import NotFound from './NotFound.vue'
import MyFooter from '@/components/MyFooter.vue'

export default {
  components: { Index, FaBiao, NotFound, MyHeader, MyFooter },
  mounted(){
  },
  data() {
    return {
      dialogVisible:false
    }
  },
  methods:{
    ...mapMutations(["setis"]),
    ...mapMutations(["setfs"]),
    //退出账号
    tczh(){
      this.$store.commit('updateLoginEnd',null)
      this.$store.commit('updateLoginEnd1',null)
      this.$router.push('/')
    },
  },
  computed:{
    ...mapState(["indexshow"],["fabiaoshow"],["loginname1"],["loginname"]),
  }
}

</script>
<style lang="scss" scoped>
  .myheader{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #303133;
  }
  .myaside{
    height: calc(100vh - 60px);
    background-color: #303133;
  }
  .mmain{
    height: calc(100vh - 60px);
    // background-color: gray;
  }
  .sfmenu{
    display: flex;
    width: 100%;
    >div{
      height: 60px;
      line-height: 60px;
      font-size: 25px;
      margin-left: 15px;
      color: #fff;
      position: relative;

    }
    >div:last-child{
      position: absolute;
      right: 10px;
    }

  }
  .el-button{
    background-color: #303133;
    border: 0;
    margin: 0;
    padding: 0;
    height: 60px;
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  // 滚动条设置
  // ::-webkit-scrollbar {
  //   /*滚动条整体样式*/
  //   width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  //   height: 1px;
  // }
  // ::-webkit-scrollbar-thumb {
  //   /*滚动条里面小方块*/
  //   border-radius: 10px;
  //   box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  //   background: #80d6d6;
  // }
  // ::-webkit-scrollbar-track {
  //   /*滚动条里面轨道*/
  //   box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  //   border-radius: 10px;
  //   background: #ededed;
  // }
</style>
<style>
  .el-icon-close:before{
    content: ' ';
  }
  .el-menu{
    border: 0;
  }
  .el-dialog{
    top: -78px;
    margin-right: 5px;
    max-width: 90px;
    height: 225px;
  }
  .htzya{
    display: block;
    width: 100%;
    text-align: center;
    line-height: 25px;
    padding: 10px 0;
    font-size: 14px;
    /* background-color: red;
    border-radius: 5px;
    color: #fff; */
    /* border-bottom: 1px solid #000; */
    color: #000;
  }
  .htzya:nth-child(odd){
    background-color: #E0E0E0;
  }
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    padding: 0px;
  }
</style>